<template>
    <div class="cell">
        <Header title="小区列表" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <loading  v-if="isflag" />
        <div class="box_wrapper" >
            <div class="box_cell">
                <p>{{quarters}}</p>
            </div>
            <div class="box_main" v-for="(item,index) in list" :key="index" @click="change(item.cellName,item.id)">
                <p>{{item.cellName}}</p>
                <img v-if="name === item.cellName" class="right"  src="../assets/icon_right.png">
            </div>
        </div>
    </div>
</template>

<script>
import Header from './header'
import { Toast } from "mint-ui";
import { units } from '../old_request'
export default {
    data(){
        return{
            unit:'',
            list:[],
            quarters:'',
            name:'',
            isflag:true
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();
        },
        change(name,id){
            let that = this;
            that.$store.commit('units',{name,id})
            that.name = name;
            Toast({
                message: "切换成功",
                iconClass: "iconfont icon-success_no_circle",
                duration: 1500
            });
            setTimeout(function(){
                that.$router.back();
            },2000)
        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        if(that.$store.state.unit){
            that.quarters = that.$store.state.unit;
        }
        that.name = that.$store.state.username;    //进入页面读取默认选中的小区
        let data = {
            "sign":that.$md5(`${that.wrapper.globalData()}id=${that.$store.state.blockid}timestamp=${that.wrapper.gettime()}`),
            "timestamp":that.wrapper.gettime(),
            "id":that.$store.state.blockid
        }
        units(data,that).then( (res) => {
            // console.log(res)
            if(res.code === 0){
                that.list = res.data;
                that.isflag = false;
                let person = {cellName:'全部',id:0};        //构造一个新的对象
                that.list.push(person);                     //写入数据
                for(let i=0;i<that.list.length;i++){            //冒泡排序
                    for(let n=0;n<that.list.length-1;n++){
                        if(that.list[n].id > that.list[n+1].id){
                            [that.list[n],that.list[n+1]] = [that.list[n+1],that.list[n]];
                        }
                    }
                }
                
            }
        })
    }
}
</script>

<style scoped>
    .cell{
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background: #E5E5E5;
        margin-top: 50px;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .right{
        position: absolute;
        right: 10px;
        margin-top: 5px;
    }
    .box_cell{
        background: #E5E5E5;
        height: 45px;
        line-height: 45px;
        font-size: 18px;
        padding: 0px 3%;
    }
    .box_main{
        display: flex;
        height: 50px;
        line-height: 50px;
        background: white;
        padding: 0 3%;
        position: relative;
    }
</style>